@@include('header.htm', {
  "title": "Form Advance - Sleek Admin Dashboard Template",

	"vector_map": "",

	"date_range_picker": "",

	"select2": "<link href='assets/plugins/select2/css/select2.min.css' rel='stylesheet'>",

	"ladda": "",

	"toastr": "",

	"flag_icon": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",

	"data_table": "",

	"responsive_data_table": "",

	"expendable_data_table": ""
})

@@include('sidebar.htm', {
	"parent": "forms",
	"sub_parent": "forms",
	"active": "form-advance"
})

@@include('top-bar.htm')




<div class="row">
	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Masked Input</h2>
			</div>

			<div class="card-body">
				<label class="text-dark font-weight-medium" for="">Date input</label>

				<div class="input-group mb-2">
					<div class="input-group-prepend">
						<span class="input-group-text">
							<i class="mdi mdi-calendar-range"></i>
						</span>
					</div>

					<input type="text" class="form-control" data-mask="00/00/0000" placeholder="" aria-label="">
				</div>

				<p style="font-size: 90%">ex. 99/99/9999</p>

				<label class="text-dark mt-4 font-weight-medium" for="">Phone input</label>

				<div class="input-group mb-2">
					<div class="input-group-prepend">
						<span class="input-group-text">
							<i class="mdi mdi-phone"></i>
						</span>
					</div>

					<input type="text" class="form-control" data-mask="(999) 999-9999" placeholder="" aria-label="">
				</div>

				<p style="font-size: 90%">ex. (999) 999-9999</p>

				<label class="text-dark mt-4 font-weight-medium" for="">Taxpayer Identification Numbers</label>

				<div class="input-group mb-2">
					<div class="input-group-prepend">
						<span class="input-group-text">
							<i class="mdi mdi-currency-usd"></i>
						</span>
					</div>

					<input type="text" class="form-control" data-mask="99-9999999" placeholder="" aria-label="">
				</div>

				<p style="font-size: 90%">ex. 99-9999999</p>

				<label class="text-dark mt-4 font-weight-medium" for="">Social Security Number</label>

				<div class="input-group mb-2">
					<div class="input-group-prepend">
						<span class="input-group-text">
							<i class="mdi mdi-lock"></i>
						</span>
					</div>

					<input type="text" class="form-control" data-mask="999-99-9999" placeholder="" aria-label="">
				</div>

				<p style="font-size: 90%">ex. 999-99-9999</p>

				<label class="text-dark mt-4 font-weight-medium" for="">Eye Script</label>

				<div class="input-group mb-2">
					<div class="input-group-prepend">
						<span class="input-group-text">
							<i class="mdi mdi-eye"></i>
						</span>
					</div>

					<input type="text" class="form-control" data-mask="~9.99 ~9.99 999" placeholder="" aria-label="">
				</div>

				<p style="font-size: 90%">ex. ~9.99 ~9.99 999</p>

				<label class="text-dark mt-4 font-weight-medium" for="">Credit Card Number</label>

				<div class="input-group mb-2">
					<div class="input-group-prepend">
						<span class="input-group-text">
							<i class="mdi mdi-credit-card"></i>
						</span>
					</div>

					<input type="text" class="form-control" data-mask="9999 9999 9999 9999" placeholder="" aria-label="">
				</div>

				<p style="font-size: 90%">ex. 9999 9999 9999 9999</p>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Multiple Select </h2>
			</div>

			<div class="card-body">
				<div class="form-group">
					<select class="js-example-basic-multiple form-control" name="states[]" multiple="multiple">
						<option value="AL">Alabana</option>
						<option value="NY">New York</option>
						<option value="VR">Virginia</option>
						<option value="WA">Washington</option>
						<option value="CA">California</option>
						<option value="WY">Wyoming</option>
					</select>
				</div>
			</div>
		</div>
	</div>
</div>




@@include('footer.htm', {

	"chart_js": "",
	"chartjs": "",

	"google_map": "",
	"mapjs": "",

	"vector_map": "",
	"vector_map_world_mill": "",
	"vector_map_js": "",
	
	"date_range_picker_moment": "",
	"date_range_picker": "",
	"date_range_js": "",

	"select2": "<script src='assets/plugins/select2/js/select2.min.js'></script>",

	"ladda_spin": "",
	"ladda": "",

	"jquery_mask": "<script src='assets/plugins/jquery-mask-input/jquery.mask.min.js'></script>",

	"toastr": "",

	"circle_progress": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",
	"full_calendar_js": "",

	"data_table": "",
	"data_table_bootstrap4": "",

	"responsive_data_table": ""
})
